<template>
    <div class="content">
        <div class="list_hot">
            <div class="Card-header_card">
                <div class="card-title">
                    <span class="title_SE4va" :style="lang == 'en' ? 'font-size:19px;' : ''">{{ $t('ServiceOpenAnnouncement') }}</span>
                    <div class="nav">
                        <p :class="{ active: notice_type == 1 }" @click="notice_type = 1">{{ $t('New_server_opened') }}</p>
                        <p :class="{ active: notice_type == 2 }" @click="notice_type = 2">{{ $t('New_Server_Announcement') }}</p>
                    </div>
                </div>
                <div class="recharge_content">
                    <div class="title">
                        <span class="flex-list">{{$t('open_game')}}</span>
                        <span class="flex-list">{{$t('Server_Region')}}</span>
                        <span class="flex-list">{{$t('Date')}}</span>
                    </div>
                    <div class="main" v-if="notice_type == 1">
                        <div class="main_line main_line_a" v-for="item in open_services_list" :key="item.id" @click="open_game(item.game_id,item.game_name)">
                            <span class="flex-list">{{ item.game_name }}</span>
                            <span class="flex-list red">{{ item.services_name }}</span>
                            <span class="flex-list">{{ item.open_services_time }}</span>
                        </div>
                        <p class="isNull isNull_notext" v-if="open_services_list.length == 0">{{$t('no_notice')}}</p>
                    </div>

                    <div class="main" v-if="notice_type == 2">
                        <div class="main_line" v-for="item in preview_list" :key="item.id" @click="open_game(item.game_id,item.game_name)">
                            <span class="flex-list">{{ item.game_name }}</span>
                            <span class="flex-list red">{{ item.services_name }}</span>
                            <span class="flex-list">{{ item.open_services_time }}</span>
                        </div>
                        <p class="isNull isNull_notext" v-if="preview_list.length == 0">{{$t('no_notice')}}</p>
                    </div>
                </div>
            </div>
        </div>

        
    </div>
</template>

<script setup>
import axios from '@/utils/api'
import { reactive,ref } from "vue";
import {useGetGameUrl} from '@/hooks/getGameUrl'
import { useUserInfoStore } from '@/store/modules/user_info/index';
import { useRouter } from "vue-router"
const router = useRouter()
const user_infoStore = useUserInfoStore();
const userInfo = reactive(user_infoStore.userInfo)
const open_game = async (game_id,game_name) => {
    const url = router.resolve({ path: '/playgame',query: { id: game_id,game_name: game_name } }).href;
    window.open(url)
}

const notice_type = ref(1)
const open_services_list = reactive([])
const getOpen_services_list = async () =>{
    const list = await axios.get('/open_services_list?limit=5&notice_type=1') //已开新服
    Object.assign(open_services_list,list.data)
}
getOpen_services_list()

const preview_list = reactive([])
const getPreview_list = async () =>{
    const list = await axios.get('/open_services_list?limit=5&notice_type=2') //新服预告
    Object.assign(preview_list,list.data)
}
getPreview_list()

const lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
}else{
    lang.value = 'zh'
}
</script>

<style lang="less" scoped>
.content {
    width: 90%;
    // height: 500px;
    // background-color: rgb(34, 192, 165);
    margin-top: 16px;
    .list_hot{
    
        margin-bottom: 10px;
        .card-title{
            position: relative;
            .nav{
                display: flex;
                justify-content: space-evenly;
                font-size: 15px;
                padding: 10px 0;
                p{
                    cursor: pointer;
                    text-align: center;
                }
                p:hover{
                    color:rgb(11, 145, 241) ;
                }
                .active{
                    color:rgb(11, 145, 241) ;
                }
            }
        }
        .title_SE4va{
            font-size: 23px;
            font-weight: bold;
            background: linear-gradient(90deg, #ff7e5f, #feb47b); /* 渐变背景 */
            -webkit-background-clip: text; /* 文字渐变 */
            background-clip: text;
            color: transparent; /* 隐藏原文字颜色 */
            letter-spacing: 1px;
            line-height: 32px;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 文字阴影 */
            filter: brightness(1.1);
        }
        .title_SE4va::before{
            content: '📢'; /* 图标装饰 */
            margin-right: 10px;
            background: transparent !important;
            color: @primary-color;
        }
        .more{
            font-size: 12px;
            color: rgba(0, 0, 0, .6);
            position: absolute;
            right: 0;
            top: 3px;
            border: 1px solid rgba(0, 0, 0, .2);
            height: 22px;
            line-height: 22px;
            padding: 0 7px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .more:hover{
            background-color: rgb(241, 241, 241);
            
        }
        .recharge_content{
            .title{
                display: flex;
                align-items: center;
                padding: 10px 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                span{
                    flex: 1;
                    text-align: center;
                }
            }
            .main_line{
                font-size: 13px;
                cursor: pointer;
                span{
                    flex: 1;
                    text-align: center;
                }
                display: flex;
                align-items: center;
                padding: 10px 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                .btn{
                    cursor: pointer;
                }
                .green{
                    color: #15b300;
                }
                .red{
                    color: red;
                }
            }
            .main_line_a{
                
                .red{
                    color: red;
                }
            }
            .main_line:hover{
                background-color: #f6f6f6;
            }
        }
    }
}
</style>